<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料 - 宠物医院管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="col-md-2 p-0">
                <c:choose>
                    <c:when test="${sessionScope.currentUser.userType == 'admin'}">
                        <%@ include file="admin-sidebar.jsp" %>
                    </c:when>
                    <c:otherwise>
                        <%@ include file="user-sidebar.jsp" %>
                    </c:otherwise>
                </c:choose>
            </div>

            <!-- 主内容区域 -->
            <div class="col-md-10">
                <div class="main-content p-4">
                    <!-- 页面标题 -->
                    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                        <h1 class="h2">个人资料</h1>
                        <div class="btn-toolbar mb-2 mb-md-0">
                            <c:choose>
                                <c:when test="${sessionScope.currentUser.userType == 'admin'}">
                                    <a href="${pageContext.request.contextPath}/pages/admin/dashboard.jsp" class="btn btn-outline-secondary">
                                        <i class="fas fa-arrow-left"></i> 返回首页
                                    </a>
                                </c:when>
                                <c:otherwise>
                                    <a href="${pageContext.request.contextPath}/pages/user/dashboard.jsp" class="btn btn-outline-secondary">
                                        <i class="fas fa-arrow-left"></i> 返回首页
                                    </a>
                                </c:otherwise>
                            </c:choose>
                        </div>
                    </div>

                    <!-- 成功提示 -->
                    <c:if test="${not empty param.success}">
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i>${param.success}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    </c:if>

                    <!-- 错误提示 -->
                    <c:if test="${not empty param.error}">
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i>${param.error}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    </c:if>

                    <div class="row">
                        <!-- 个人信息卡片 -->
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-user me-2"></i>基本信息
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <form method="post" action="${pageContext.request.contextPath}/user/updateProfile" id="profileForm">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="username" class="form-label">用户名</label>
                                                    <input type="text" class="form-control" id="username" value="${user.username}" readonly>
                                                    <div class="form-text">用户名不可修改</div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="userType" class="form-label">用户类型</label>
                                                    <input type="text" class="form-control" id="userType" 
                                                           value="${user.userType == 'admin' ? '管理员' : '普通用户'}" readonly>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="realName" class="form-label">真实姓名 <span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control" id="realName" name="realName" 
                                                           value="${user.realName}" required maxlength="50">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="phone" class="form-label">联系电话</label>
                                                    <input type="tel" class="form-control" id="phone" name="phone" 
                                                           value="${user.phone}" maxlength="20">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="email" class="form-label">邮箱地址</label>
                                            <input type="email" class="form-control" id="email" name="email" 
                                                   value="${user.email}" maxlength="100">
                                        </div>

                                        <div class="mb-3">
                                            <label for="address" class="form-label">联系地址</label>
                                            <textarea class="form-control" id="address" name="address" 
                                                      rows="3" maxlength="200">${user.address}</textarea>
                                        </div>

                                        <div class="d-flex justify-content-end">
                                            <button type="reset" class="btn btn-secondary me-2">
                                                <i class="fas fa-undo"></i> 重置
                                            </button>
                                            <button type="submit" class="btn btn-primary">
                                                <i class="fas fa-save"></i> 保存修改
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <!-- 账户信息卡片 -->
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="card-title mb-0">
                                        <i class="fas fa-info-circle me-2"></i>账户信息
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label class="form-label">注册时间</label>
                                        <div class="form-control-plaintext">
                                            <fmt:formatDate value="${user.createTime}" pattern="yyyy-MM-dd HH:mm"/>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label">最后更新</label>
                                        <div class="form-control-plaintext">
                                            <fmt:formatDate value="${user.updateTime}" pattern="yyyy-MM-dd HH:mm"/>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label">账户状态</label>
                                        <div class="form-control-plaintext">
                                            <c:choose>
                                                <c:when test="${user.status == 'active'}">
                                                    <span class="badge bg-success">正常</span>
                                                </c:when>
                                                <c:when test="${user.status == 'inactive'}">
                                                    <span class="badge bg-warning">未激活</span>
                                                </c:when>
                                                <c:otherwise>
                                                    <span class="badge bg-danger">已禁用</span>
                                                </c:otherwise>
                                            </c:choose>
                                        </div>
                                    </div>

                                    <div class="d-grid">
                                        <a href="${pageContext.request.contextPath}/pages/common/change-password.jsp" 
                                           class="btn btn-outline-primary">
                                            <i class="fas fa-key me-2"></i>修改密码
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <!-- 安全提示 -->
                            <div class="card mt-3">
                                <div class="card-header">
                                    <h6 class="mb-0">
                                        <i class="fas fa-shield-alt me-2"></i>安全提示
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <small class="text-muted">
                                        <ul class="mb-0">
                                            <li>请保护好您的账户信息</li>
                                            <li>定期更换密码</li>
                                            <li>不要在公共场所登录</li>
                                            <li>发现异常及时联系管理员</li>
                                        </ul>
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 表单验证
        document.getElementById('profileForm').addEventListener('submit', function(e) {
            const realName = document.getElementById('realName').value.trim();
            const email = document.getElementById('email').value.trim();
            const phone = document.getElementById('phone').value.trim();

            // 验证真实姓名
            if (!realName) {
                alert('请输入真实姓名');
                e.preventDefault();
                return;
            }

            // 验证邮箱格式
            if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                alert('请输入正确的邮箱格式');
                e.preventDefault();
                return;
            }

            // 验证手机号格式
            if (phone && !/^1[3-9]\d{9}$/.test(phone)) {
                alert('请输入正确的手机号格式');
                e.preventDefault();
                return;
            }
        });
    </script>
</body>
</html>
